<template>
  <div style="height:0px">
    <div class="bgborder" :style="'background-image:url('+comics.cover+')'">
    </div>
    <div class="details">
      <div class="cover">
        <img :src="comics.cover" alt="">
      </div>
      <div class="info">
        <p class="title">{{comics.name}}
          <span class="right">
            <i class="el-icon-star-on" style="color:#FFEC8B"></i> <a>{{comics.favor}}</a>
          </span>
        </p>
        <p class="subtitle">作者：{{comics.author}}</p>
        <p class="tip">
          <span class="block"> 状态：{{comics.state ? '连载中':'停更'}}</span>
          <span class="block"> 热度：{{comics.hit}}</span>
          <span class="block">题材：{{comics.tag}}</span>
        </p>
        <p class="content">
          {{comics.desc}}
        </p>
        <p class="bottom">
          <a @click="addfavorite(comics.cid)" class="btn-1">收藏</a>
          <a  @click="goLink('/read',comics.cid,1)" class="btn-2">阅读</a>
        </p>
      </div>
    </div>
    <div class="view-comment">
      <div class="container">
        <ul class="detailist">
          <a v-for="item in tableData" @click="goLink('/read',comics.cid,item.chapter)">
            <li>第{{item.chapter}}章 &nbsp;&nbsp;{{item.title}}</li>
          </a>
        </ul>
        <div class="pager" >
          <div v-show="totalCount===0">暂无数据！</div>
          <el-pagination v-show="totalCount!=0" layout="prev, pager, next" :current-page="currentPage" :total=totalCount @current-change="handleCurrentChange"></el-pagination>
        </div>
        <div class="readme" v-show="!commentShow" @click="commentShow = true" > 查看评论 </div>
        <Comment v-if="commentShow" :comicsId="searchParam.param"></Comment>
      </div>
    </div>
  </div>
</template>

<script>
import Comment from 'base/Comment/Comment'
// import {mapGetters} from 'vuex'
export default {
  data () {
    return {
      commentShow: false,
      rate: 3,
      comics: {},
      param: {},
      tableData:[],
      searchParam:{size: 40},
      currentPage: 1,
      totalCount: 0,
    }
  },
  components: {
    Comment
  },
  created () {
    this.searchParam.param = this.$route.query.cid
    this.getComics()
    this.getData()
    this.addhit()
  },
  methods:{
    addfavorite(cid){
      this.param.cid = cid
      if(JSON.parse(sessionStorage.getItem('u')) === null || JSON.parse(sessionStorage.getItem('u')).uid === undefined){
        this.$router.push('/login')
      }else{
        var _this = this
        this.param.uid = JSON.parse(sessionStorage.getItem('u')).uid
        this.$ajax.post('/api/addFavorite',_this.param).then(function(response){
          if(response.data.code === 0){
            _this.$message({message: response.data.data ,type: 'success'})
          }else{
            _this.$message({message: response.data.msg ,type: 'error'})
          }
        }).catch(function(error){_this.goindex()})
      }
      
    },
    handleCurrentChange(val) {
      this.searchParam.page = val-1
      this.currentPage = val
      this.getData()
    },
    addhit(){
      this.$ajax.post('/api/hitComics?cid='+this.$route.query.cid).then(function(response){
      }).catch(function(error){})
    },
    getComics(){
      var _this = this
      this.$ajax.post('/api/getComicsById?cid='+_this.$route.query.cid).then(function(response){
        if(response.data.code === 0){
          _this.comics = response.data.data
        }else {
          _this.goindex()
        }
      }).catch(function(error){_this.goindex()})
    },
    getData() {
      var _this = this
      this.$ajax.post('/api/getSectionByState',_this.searchParam).then(function(response){
        _this.tableData = response.data.data.content
        _this.totalCount = response.data.data.totalElements
        console.log(response.data)
      }).catch(function(error){console.log(error)})
    },
    goLink (path,id,chapterId) {
      this.$router.push({ 
        path: path,
        query:{cid: id,n: this.comics.name,pid: chapterId}
      })
    },
    goindex(){
      this.$router.push('/index')
    }
  }
}
</script>

<style scoped lang="stylus" rle="stylesheet/stylus">
a
  text-decoration none
  color red
.bgborder
  position relative
  min-height 300px
  padding-top 100px
  
  background-size 100% 100%
  background-repeat no-repeat
  background-position center
  background-size cover
  -webkit-filter blur(25px)
  -moz-filter blur(25px)
  -o-filter blur(25px)
  -ms-filter blur(25px)
  filter blur(25px)
.details
  position relative
  min-height 310px
  margin 0 auto
  border-top-left-radius 8px
  border-top-right-radius 8px
  background-color #fff
  width 1200px
  z-index 1
  top -300px
  .cover
    height 314px
    width 240px
    margin-top -45px
    margin-left 40px
    float left
    box-shadow 0 0 5px #444
    border-radius 6px
    overflow hidden
    img
      width 240px
  .info
    float left
    width 870px
    padding-left 20px
    .title
      font-size 30px
      color #252525
      margin-top 35px
      margin-bottom 0
      .right
        float right
        font-size 12p
    .subtitle
      font-size 13px
      color #666
      margin-top 10px
    .tip
      margin-top 20px
      .block
        font-size 13px
        color #999;
        margin-right 40px
    .content
      font-size 13px
      color #666
      margin-top 10px
      line-height 20px
      width 710px
      height 58px
      position relative
      overflow hidden
      text-overflow ellipsis
    .bottom
      margin-top 25px
      .btn-1
        cursor pointer
        background #ffdb6f
        border-radius 3px
        font-size 16px
        color #874e12
        height 36px
        line-height 36px
        width 103px
        text-align center
        display inline-block
      .btn-2
        cursor pointer
        margin-left 6px
        background #fd113a
        border-radius 3px
        font-size 16px
        color #fff
        width 80px
        height 36px
        line-height 36px
        text-align center
        display inline-block
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
        vertical-align top
        padding 0 10px
.view-comment
  overflow hidden
  margin-bottom 50px
  top -310px
  background-color #fff
  position relative
  .container
    padding 0 35px
    width 1200px
    margin 0 auto
    overflow hidden
    .readme
      cursor pointer
      display flex
      justify-content center
      margin-bottom 24px
      font-size 14px
      -webkit-transition all .30s linear
      -moz-transition all .30s linear
      -o-transition all .30s linear
      -ms-transition all .30s linear
      transition all .30s linear
    .readme:hover
      color #ff3860
    .pager
      display flex
      justify-content center
      margin 30px 0
    ul
      list-style none
    .detailist
      overflow hidden
      margin 0 auto
      margin-top 10px
      li
        float left
        overflow hidden
        background #f6f6f6
        width 198px
        margin 10px 11px
        cursor pointer
        padding 2px
</style>
